<template>
  <div class="nav">
    <div class="nav-item">
      <div class="one">
        <a class="itemleft" v-for=" (item,index) in titelleft " :key="index">{{item.name}}</a>
      </div>
      <div class="two">
        <a class="itemright" v-for=" (item,index) in titelright " :key="index">{{item.name}}</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'headers',
  data () {
    return {
      titelleft: [
        {
          index: 0,
          name: '小米手机'
        },
        {
          index: 1,
          name: 'MIUI'
        },
        {
          index: 2,
          name: 'loT'
        },
        {
          index: 3,
          name: '云服务'
        },
        {
          index: 4,
          name: '天星科教'
        },
        {
          index: 5,
          name: '有品'
        },
        {
          index: 6,
          name: '小爱开放平台'
        },
        {
          index: 7,
          name: '企业团购'
        },
        {
          index: 8,
          name: '资源证照'
        },
        {
          index: 9,
          name: '协议规则'
        },
        {
          index: 10,
          name: '下载APP'
        },
        {
          index: 11,
          name: '智能生活'
        }
      ],
      titelright: [
        {
          index: 0,
          name: '登录'
        },
        {
          index: 1,
          name: '注册'
        },
        {
          index: 2,
          name: '消息通知'
        },
        {
          index: 3,
          name: '购物车'
        }
      ]
    }
  }
}
</script>

<style>
.nav {
  width: 100%;
  height: 40px;
  background: black;
}
.nav-item {
  min-width: 1223px;
  background: black;
  display: flex;
  justify-content: space-between;
}
.one {
  width: 900px;
}
.two {
  width: 270px;
}
.itemleft {
  color: white;
  font-size: 10px;
  margin-right: 30px;
  line-height: 40px;
}
.itemright {
  color: white;
  font-size: 10px;
  margin-left: 30px;
  line-height: 40px;
}
</style>
